{% extends "base.html" %}

{% block title %}
    Project List
{% endblock %}

 {% block head %}
  <link href="/static/css/jquery.treegrid.css" rel="stylesheet">
 {% endblock %}

{% block content %}

       <div class="row">

            <!--table class="table tree-2 table-bordered table-striped table-condensed" id="treetable">
                <tr><td>项目层级</td><td>资源属性</td><td>操作</td></tr>
                <tr class="treegrid-1">
                    <td>Root node 1</td><td>Additional info</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-2 treegrid-parent-1">
                    <td>Node 1-1</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-3 treegrid-parent-1">
                    <td>Node 1-2</td><td>Additional info</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-4 treegrid-parent-3">
                    <td>Node 1-2-1</td><td>Additional info</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-5">
                    <td>Root node 2</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-6 treegrid-parent-5">
                    <td>Node 2-1</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-7 treegrid-parent-5">
                    <td>Node 2-2</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-8 treegrid-parent-7">
                    <td>Node 2-2-1</td><td>Additional info</td>
                </tr>
                 <tr class="treegrid-9 treegrid-parent-8">
                    <td>Node 2-2-1-1</td><td>Additional info</td>
                </tr>
            </table-->

           <table class="table tree-2 table-bordered table-striped table-condensed" id="treetable">
           <tr><td>项目层级</td><td>资源属性</td><td>操作</td></tr>
       {% for treegrid in projectlist %}
           {% if treegrid.parent_id == 1 %}
               <tr class="treegrid-{{ treegrid.id }}">
                    <td>{{ treegrid.name }}</td>
                       <td>资源属性</td>
                       <td>
                           <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" onclick="get_id({{ treegrid.id }})">Host</button>
                           <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">Delete</button>
                       </td>
               </tr>

               {% for subtreegrid in projectlist %}
                   {% ifequal subtreegrid.parent_id treegrid.id %}
                      <tr class="treegrid-{{ subtreegrid.id }} treegrid-parent-{{ treegrid.id }}">
                          <td>{{ subtreegrid.name }}</td>
                          <td>{{ subtreegrid.id }}</td>
                          <td >
                              <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" id="host-{{ subtreegrid.id }}">Host</button>
                              <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">Package</button>
                           <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">Delete</button>
                          </td>
                      </tr>

                       {% for subsubtreegrid in projectlist %}
                            {% ifequal subsubtreegrid.parent_id subtreegrid.id %}
                           <tr class="treegrid-{{ subsubtreegrid.id }} treegrid-parent-{{ subtreegrid.id }}">
                             <td>{{ subsubtreegrid.name }}</td>
                               <td>treegrid{{ subsubtreegrid.id }}</td>
                               <td>
                               <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" >Host</button>
                               <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#myModal">Delete</button>
                           </td>
                           </tr>
                           {% endifequal %}
                        {% endfor %}
               {% endifequal %}
                   {% endfor %}

            {% endif %}
       {% endfor %}
           </table>

       </div>

    <!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body" >在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

 <script type="text/javascript">
   function get_id(id) {
       var id = id

       $.ajax({
            type: 'GET',
            url: '/cmdb/',
            data: data,
           success: success,
           dataType: json
       });


       $('#myModal').on('shown.bs.modal',function(e) {
       alert (id);
   })
       }

  </script>

    <script type="text/javascript" src="/static/js/jquery.treegrid.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.treegrid.bootstrap3.js"></script>
    <script type="text/javascript">
         $(document).ready(function() {
    　    　    　   $('#treetable').treegrid({
                    expanderExpandedClass: 'glyphicon glyphicon-minus',
                    expanderCollapsedClass: 'glyphicon glyphicon-plus',
                });
          });
    </script>

{% endblock %}
